<template>
  <div class="my-order">
    <h1 class="title1" v-show="titleShow">My Orders</h1>
    <h1 class="title">
      <ul class="tab-ul clearfix">
        <li class="tab-li" :class="{'active':changeLink}" @click="changeItem1">Cashback</li>
        <li class="tab-li" :class="{'active':!changeLink}" @click="changeItem2">Promotion</li>
      </ul>
    </h1>
    <div class="router-box">
      <router-view></router-view>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        titleShow: true,
        changeLink: true,//顶部栏的小横线切换
      }
    },
    created() {
      if(this.$route.fullPath === '/my-order/promotion'){
        this.changeLink = false
      }else if(this.$route.fullPath === '/my-order' || this.$route.fullPath === '/my-order/cashback'){
        this.changeLink = true
      }
    },
    methods: {
      changeItem1(){
        this.changeLink = true
        this.$router.push({
          path:'/my-order/cashback'
        })
      },
      changeItem2(){
        this.changeLink = false
        this.$router.push({
          path:'/my-order/promotion'
        })
      }
    },
    watch:{
      '$route' (to,from){
        if(from.path === '/home'|| from.path === '/' ){
          this.changeLink= false
        }
      }
    },
    components: {

    },
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .my-order
    width:100%;
    padding-bottom:75px;
    .title1
      font-size: 36px;
      color: #333333
      padding-top: 36px;
    .title
      padding-top: 11px;
      .tab-ul
        width:100%
        .tab-li
          font-size:24px
          line-height: 70px
          color: #bbb
          margin-right:80px
          float:left
          display:inline-block
          cursor:pointer
        .active
          color:#18823a

</style>
